<template>
<div>
  <el-dialog
    title="查看"
    :visible.sync="dialogVisible2"
    :width="width">
  <center> <img :src="src"  @load="onLoad" /></center>
  </el-dialog>
  <el-card class="banji" style="height: 750px;">
    <div>
      <el-select v-model="tbClassId" placeholder="请选择班级" clearable>
        <el-option v-for="bj in bjs" :key="bj.id" :value="bj.id" :label="bj.name"></el-option>
      </el-select>
    </div>
    <myTable highlight-current-row  @currentChange="currentChange" ref="aaa" v-if="tableVisible" :file="file" :cols="cols" :formObj="form" :rules="rules" :tableAttrs="tableAttr" :path="path"
      :urlParam="urlParam" style="line-height:40px;">
      <template v-slot:form>
        <el-form-item label="学号" prop="stuNo">
          <el-input v-model="form.stuNo" placeholder="学号" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="form.sex" placeholder="性别" clearable></el-input>
        </el-form-item>      
      </template>
      <template v-slot:buttons>       
          <el-button @click="czmm"  type="info" icon="el-icon-refresh-right"  :disabled="!currentRow" style="float: left;">重置密码</el-button>
      </template>
    </myTable>
  </el-card>
</div>
</template>

<script>
  import myTable from '../components/myTable.vue'
  export default {
    components: {myTable},
    data() {
      return {
		src: '',
		width: '',
		visible: false,
        currentRow:null,
        src:'',
        dialogVisible2:false,
        tbClassId: '',
        bjs: [],
        tableVisible: false,
        path: '/student',
        urlParam: {},
		    file:'',
        cols: [
          {property: 'id',label: '序号'},
          {property: 'stuNo',label: '学号'},
          {property: 'name',label: '姓名'},
          {property: 'sex',label: '性别'}
        ],
        form: {
          id: '',
          stuNo: '',
          name: '',
          sex: '',
          tbClass: '',
        },
        rules: {
          stuNo: [{
            required: true,
            message: '请输入学号',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '请输入性别',
            trigger: 'blur'
          }],
        },
        tableAttr: {
          border: true
        }
      }
    },
    created() {
      this.$ajax.post('banji/list', {}).then(res => {
        var result = res.data;
        this.bjs = result.data;
        console.log(this.bjs);
      })
    },
    methods:{
     currentChange(row) {
       this.currentRow = row;
     },
      beforeupload(file){
        this.form.file=file;
        return false
      },
      czmm(){
        this.$ajax.post('student/resPwd',this.currentRow).then(res=>{
          var result = res.data
          if(result){
            this.$notify({
              title: '提示',
              message: '密码重置成功为1111',
              position: 'bottom-right'
            });
          }else{
            this.$notify({
              title: '提示',
              message: '密码重置失败',
              position: 'bottom-right'
            });
          }
        })
      },
	  onLoad(e){
	      const img = e.target;
	      let width = 0;
	      if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
	        width = img.width + 40;
	      }
	      this.width = width + 'px';
	    },
    },
    watch: {
      tbClassId(val) {
        this.tableVisible = false;
        if (val) {
          this.urlParam = {
            tbClassId: val
          };
          this.$nextTick(() => {
            this.tableVisible = true;
          })
        }
      }
    }
  }
</script>

<style scoped>
  .el-table,
  .cell {
    line-height: 60px;
  }
</style>
